<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图书</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/dayjs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style type="text/css">
        #root{
            width: 100%;
        }
        .all{
            width: 70%;
            margin: 0 auto;
        }
        .all .table{
            width: 100%;
        }
        .all .table .title{
            height: 100px;
            text-align: center;
            font-size: 25px;
            font-weight: 600;
            background-color: lightgreen;
        }
        .all .table tr th{
            width: 10%;
        }
        .desc{
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="all">
            <table class="table" border="1">
                <tr>
                    <th colspan="2" class="title">
                        添加电子图书
                    </th>
                </tr>
                <tr>
                    <th>图书名称<span style="color: red">(*)</span></th>
                    <td>
                        <input type="text" v-model="book.title">
                    </td>
                </tr>
                <tr>
                    <th>图书分类<span style="color: red">(*)</span></th>
                    <td>
                        <select ref="type">
                            <option :value="obj.id" v-for="(obj,index) in categoryList" :key="obj.id">{{obj.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>图书摘要</th>
                    <td>
                        <textarea class="desc" name="desc" v-model="book.summary"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>上传人</th>
                    <td>
                        <input type="text" v-model="book.uploaduser">
                    </td>
                </tr>
                <tr>
                    <th>上传时间<span style="color: red">(*)</span></th>
                    <td>
                        <input type="date" v-model="book.reqDate">
                    </td>
                </tr>
                <tr>
                    <th colspan="2">
                        <button type="button" @click="submitHandler">提交</button>
                        <button type="button" @click="goback">返回</button>
                    </th>
                </tr>
                <tr v-if="msg">
                    <th colspan="2" v-html="msg"></th>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data(){
                return {
                    book : {
                        categoryId : 0,
                        title : '',
                        summary : '',
                        uploaduser : '',
                        reqDate : ''
                    },
                    categoryList : [],
                    msg : ''
                }
            },
            mounted(){
                this.init();
                this.msg = '';
            },
            methods : {
                // 初始化加载分类
                async init(){
                    let resp = await axios.get('/bookManagerSys/category/list');
                    let result = resp.data;
                    if(result.code === 200){
                        this.categoryList = result.data;
                    }else{
                        alert(result.msg);
                    }
                },
                // 提交回调
                async submitHandler(){
                    this.book.categoryId = this.$refs.type.value;
                    const {title, summary, uploaduser, reqDate} = this.book;
                    if(title === ''){
                        this.msg = '<span style="color: red">图书名称不能为空</span>';
                    }else if(summary === ''){
                        this.msg = '<span style="color: red">图书摘要不能为空</span>';
                    }else if(uploaduser === ''){
                        this.msg = '<span style="color: red">上传人不能为空</span>';
                    }else if(reqDate === ''){
                        this.msg = '<span style="color: red">上传时间不能为空</span>';
                    }else{
                        let resp = await axios.post('/bookManagerSys/book/add',this.book);
                        let result = resp.data;
                        if(result.code === 200){
                            this.msg = '<span style="color: green">添加成功</span>';
                            this.book = {};
                        }else{
                            this.msg = '<span style="color: red">'+result.msg+'</span>';
                        }
                    }
                },

                goback(){
                    history.back();
                }
            }
        })
    </script>
</body>
</html>